<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>银行系统登录</title>
    <link rel="stylesheet" href="css/log.css">
</head>

<body>
<div class="container">
    <h1>银行系统登录</h1>
    <form onsubmit="return false;">
        <br>
        <span class="p">*</span>
        <label for="username">用户名</label>
        <input type="text" id="username" class="register" placeholder="请输入用户名"><br><br>
        <span class="q">*</span>
        <label for="pwd">登录密码</label>
        <input type="password" id="pwd" class="register" placeholder="请输入密码"><br><br>
        <div style="margin-left: 50px;">
            <label><input type="checkbox" class="checkbox"> 记住用户名</label>
        </div>
        <br>
        <input type="submit" value="登录" class="submit" onclick="login()"><br>
        <a href="register.html" class="mid">还没有账户？点我注册</a>
        <br><br>
    </form>
</div>

<script>
    function login() {
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('pwd').value.trim();

        if (!username) {
            alert("请输入用户名");
            return;
        }
        if (!password) {
            alert("请输入密码");
            return;
        }

        const params = new URLSearchParams();
        params.append('username', username);
        params.append('password', password);

        fetch('/user/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: params
        })
            .then(response => {
                if (!response.ok) throw new Error('网络响应异常');
                return response.json();
            })
            .then(data => {
                console.log("后端返回:", data);

                // 判断登录成功
                if (data && data.id) {
                    // 保存到 localStorage，关键字段 userId
                    const userInfo = {
                        userId: data.id,       // 必须有 userId，供 user.html fetch 使用
                        name: data.name || username,
                        gender: data.gender || '男'
                    };
                    localStorage.setItem('user', JSON.stringify(userInfo));

                    // 记住用户名
                    const rememberCheckbox = document.querySelector('.checkbox');
                    if (rememberCheckbox.checked) {
                        localStorage.setItem('rememberedUsername', username);
                    } else {
                        localStorage.removeItem('rememberedUsername');
                    }

                    // 登录成功提示
                    const messageDiv = document.createElement('div');
                    messageDiv.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: rgba(0, 0, 0, 0.8);
                    color: white;
                    padding: 20px 40px;
                    border-radius: 5px;
                    z-index: 1000;
                    font-size: 16px;
                `;
                    messageDiv.textContent = '登录成功！3秒后自动跳转...';
                    document.body.appendChild(messageDiv);

                    let countdown = 3;
                    const timer = setInterval(() => {
                        countdown--;
                        messageDiv.textContent = `登录成功！${countdown}秒后自动跳转...`;
                        if (countdown <= 0) {
                            clearInterval(timer);
                            window.location.href = 'index.html';
                        }
                    }, 1000);

                } else {
                    alert("用户名或密码错误，请重新输入");
                }
            })
            .catch(error => {
                console.error('登录请求出错:', error);
                alert("登录失败，请稍后重试");
            });
    }

    // 页面加载时自动填充用户名
    window.onload = function () {
        const rememberedUsername = localStorage.getItem('rememberedUsername');
        if (rememberedUsername) {
            document.getElementById('username').value = rememberedUsername;
            const rememberCheckbox = document.querySelector('.checkbox');
            if (rememberCheckbox) {
                rememberCheckbox.checked = true;
            }
        }
    };
</script>

</body>
</html>
